<template>
	<view>
		<!-- 顶部轮播 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in product.images">
						<image :src="item"/>
				</swiper-item>
<!-- 				<swiper-item>
					<image src="../../static/tabBarImages/bannar/lunbo-banner.png" />
				</swiper-item> -->

			</swiper>
		</view>
		<view :id="triggerElementId" class="product-info">
			<!-- 分享按钮 -->
			<view class="share-operation tn-share tn-flex-center">
				<tn-button only-button open-type="share">
					<tn-icon name="share-circle" size="54" />
				</tn-button>
			</view>
			<!-- 基础信息 -->
			<view class="product-base">
				<view class="tn-flex-end-between tn-mb-sm">
					<view class="tn-flex">
						<view class="price">{{ product?.price }}</view>
						<tn-tag class="tn-ml-sm" size="sm" :custom-style="myRadiusStyle" type="danger" font-size="25rpx">760.00/月</tn-tag>
					</view>
					
					<view class="sale">
						已售 <text>{{ product?.sale }}</text>
					</view>
				</view>
				<view class="tn-flex tn-mb-sm">
					<view class="title">{{ product?.title }}</view>
					<image class="xxhx-icon tn-ml-sm" src="https://winwin-public.oss-cn-hangzhou.aliyuncs.com/xxhf-b-w.png"></image>
				</view>
				<view class="tag-container tn-flex">
					<view class="tn-mr-sm tn-shadow-blur">
						<tn-tag font-size="20rpx" bg-color="tn-gray-light" text-color="tn-type-primary" border>12月</tn-tag>
					</view>
					<view class="tn-mr-sm tn-shadow-blur">
						<tn-tag  font-size="20rpx" bg-color="tn-gray-light" text-color="tn-type-primary" border>按月扣款</tn-tag>	
					</view>
					<view class="tn-mr-sm tn-shadow-blur">
						<tn-tag font-size="20rpx" bg-color="tn-gray-light" text-color="tn-type-primary" border>热门推介</tn-tag>
					</view>
				</view>
				
			</view>
			<!-- 商品属性 -->
			<view class="product-attr">
				<view v-for="(item, index) in product?.attributes" :key="index" class="attr-item">
					<view class="name">{{ item.name }}</view>
					<view class="value">{{ item.value }}</view>
				</view>
			</view>
			<!-- 产品详情 -->
			<view class="product-detail">
				<view class="title">
					<tn-title title="商品模版 · 产品详情" :cool-bg-number="6" />
				</view>
				<view class="content">
					{{ product?.content }}
				</view>
				<view>
					<view class="tn-text-bold tn-red_text"> 特别提示 </view>
					<text>
						1:责任说明:请确认本次操作为真实交易且是您个人自愿，而非洗钱，套现等其他非法行为;<br/>
						2:当前订单不是贷款、不是金融性质，您每支付一笔款项，商家才可收到该笔款项，若您未能按时交费，商家有权停止服务并对您进行追偿<br/>
						3:浩络付仅提供支付工具，并未参与商品销售、服务或者其他商家经营行为;<br/>
						4:若履约过程出现疑异或中途退出(已经使用的阶段服务费用无法退款)，具体请找商家协商处理<br/>
					</text>
					
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-operation-bar tn-shadow">
			<view class="left">
				<view class="left-btn-item first" @tap.stop="tnNavPage('/pages/index/index', 'reLaunch')">
					<view class="icon">
						<tn-icon name="home-in" />
					</view>
					<view class="title">首页</view>
				</view>
				<tn-button only-button open-type="contact">
					<view class="left-btn-item">
						<view class="icon">
							<tn-icon name="service-simple-fill" />
						</view>
						<view class="title">客服</view>
					</view>
				</tn-button>
			</view>
			<view class="buy-btn tn-gradient-bg__cool-6 tn-white_text tn-shadow-blur" @click="toOrderConfirm('WE11')">
				立 即 购 买
			</view>
		</view>
	</view>
</template>


<script lang="ts" setup>
	import {
		generateRandomFloat,
		generateRandomNumber
	} from '../../utils/local-mock'
	import {
		ref,CSSProperties
	} from 'vue';

	let indicatorDots = true
	let autoplay = true
	let interval = 3000
	let duration = 1500
	
	
	const myRadiusStyle: CSSProperties = {
		marginLeft:'20rpx',
	  borderRadius:'30rpx'
	}

	let product = ref({
		id: "123",
		title: '商品模板',
		desc: '商品模板，是一套你值得拥有的模板',
		images: [
			"https://winwin-public.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99%E9%BE%99.png",
			"https://winwin-public.oss-cn-hangzhou.aliyuncs.com/%E5%85%AC%E9%B8%A1.png",
			"https://winwin-public.oss-cn-hangzhou.aliyuncs.com/%E7%BE%8A.png"
			
		].sort(() => Math.random() - 0.5),
		price: generateRandomFloat(1, 1000),
		sale: generateRandomNumber(1, 1000),
		content: '商品模板，是一套你值得拥有的模板',
		attributes: [{
				name: '服务类型',
				value: '按月扣款',
			},
			{
				name: '阶段付',
				value: '12',
			},
			{
				name: '可用门店',
				value: '橙艺国际艺术培训',
			},
		],
		tags: ['热销', '推荐', '新品'].slice(0, generateRandomNumber(1, 3)),
	})
	
	function toOrderConfirm(pdId) {
		console.log("进来了");
		uni.navigateTo({
			// url: `/pages/index/pdDetail/pdDetail?pdId=${pdId}`
			url: "/pages/detail-page/product-detail/payment"
		});
	};
</script>

<style lang="scss" scoped>
	@import './styles/index.scss';
</style>